<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="ism" uri="http://www.baseproj.org/rd/html"%>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<ism:link rel="stylesheet" type="text/css" href="../skins/main.css" debug="false" />
<ism:link rel="stylesheet" type="text/css" href="../js/artDialog4.1.7/skins/green.css" />
</head>
<body class="popUp caseImg chooseTO">
    <div class="dataGrid">
        <table id="aoiGraphTable">
            <tbody class="tableHover" id="aoiGraphBody">
                <s:iterator value="configList" status="number">
                    <tr>
                        <td width="80"><s:property value="name" />
                        </td>
                        <td><s:select list="value" name="%{key}" id="%{key}" value="defaultVaule" /></td>
                    </tr>
                </s:iterator>
            </tbody>
        </table>
    </div>
    <div style="text-align:center; width:65%;margin:0px; " >
        <input class="inputButton" type="button" onclick="modify()" value="确定"> <input class="inputButton" type="button" onclick="exportData()" value="导出数据"> <input
            class="inputButton subButton" type="button" onclick="popdown('modifyAoi');" value="关闭">
    </div>
    <div>
        <input type="hidden" id="modify_aoi_color" /> <input type="hidden" name="projectCode" id="projectCode" value="<s:property value='projectCode' />" /> <input type="hidden" name="schemeCode"
            id="schemeCode" value="<s:property value='schemeCode' />" />
    </div>
</body>
<ism:script type="text/javascript" src="../js/jquery.min.js"></ism:script>
<ism:script type="text/javascript" src="../js/colorConversion.js" debug="false"></ism:script>
<ism:script type="text/javascript" src="../js/common.js" debug="false"></ism:script>
<ism:script type="text/javascript" src="../js/popSelect.js"></ism:script>
<ism:script type="text/javascript" src="../js/eye_core.js" debug="false"></ism:script>
<ism:script type="text/javascript" src="../js/artDialog4.1.7/artDialog.js"></ism:script>
<ism:script type="text/javascript" src="../js/artDialog4.1.7/plugins/iframeTools.js"></ism:script>
<script type="text/javascript">
    var schemeQuestions = null; //方案的问卷信息
    var results = null; //被试信息
    var row = 0; //被试信息行数
    var column = 0; //被试信息的属性列数
    $(function() {
        if (top.modifyAoiIndex == -1) { //做个异常保护，等于-1，表示未选择
            popalert({
                "content" : "未找到兴趣区，请重新选择！",
                "icon" : "warning",
                "okVal" : "确定",
                "cancel" : false
            });
            popdown('modifyAoi'); //关闭窗口
            return;
        }
        loadAoiTableBody();
    });

    function loadAoiTableBody() {
        var aoiGraph = top.schemeAoiGraphs[top.modifyAoiIndex];
        var colorObj = $("#aoiGraphBody").find("tr").eq(0).find("td").eq(1);

        /** 1.颜色选项替换 (代码复制于initAoiDrawColors方法)*/
        var content = "<div class='aoi-info'><span class='draw-color'><i class='arrow'></i>";
        content += "<a href='#'><span class='colors c7' ><em></em></span></a>"; // 默认颜色
        content += "<div class='colorMore'><div class='colorMore-panel'>";
        content += "<a href='#'><span class='colors c0' ><em></em></span></a>";
        content += "<a href='#'><span class='colors c7' ><em></em></span></a>";
        content += "<a href='#'><span class='colors c2' ><em></em></span></a>";
        content += "<a href='#'><span class='colors c3' ><em></em></span></a>";

        content += "</div></div></span>";
        content += "<input type='hidden' id='cfg_aoi_color'/></div>"; // 隐藏的真正颜色
        colorObj.html(content);
        $("#cfg_aoi_color").val($(".draw-color>a>span").find("em").eq(0).css('background-color')); // 赋值隐藏的真正颜色

        /** 绑定下拉框选择时的，显示所有颜色选项 */
        $(".draw-color .colorMore a").unbind("hover");
        $(".draw-color").hover(function() {
            $(this).unbind("click");
            $(this).click(function() {
                /* 信息层显示 */
                var message = $(".colorMore");
                message.show();
                message.find(".colorMore-panel").stop().animate({
                    top : "0px"
                }, 200);
            });
        }, function() {
            /* 信息层隐藏 */
            var message = $(".colorMore");
            message.slideUp(10, function() {
                message.find(".colorMore-panel").css("top", "-315px");
            });
            $(this).unbind("click");
        });

        /** 绑定点击a标签即选择颜色后的事件 */
        $(".draw-color .colorMore a").unbind("click");
        $(".draw-color .colorMore a").click(function() {
            $(".draw-color>a>span").attr("class", $(this).find("span").eq(0).attr("class"));
            /* 信息层隐藏 */
            var message = $(".colorMore");
            message.slideUp(10, function() {
                message.find(".colorMore-panel").css("top", "-315px");
            });
            $("#cfg_aoi_color").val($(this).find("span em").eq(0).css('background-color')); // 改变隐藏的真正颜色

        });

        /** 2.AOI昵称选项*/
        var html = "<tr>";
        html += "<td>兴趣区名称</td>";
        html += "<td><input type='text' class='inputText_min' style='width:120px' maxlength='10' id='modify_aoi_showname' value='" + aoiGraph.showName + "' /></td>";
        html += "</tr>";
        $("#aoiGraphBody").append(html);

        /**3.调整下拉框样式*/
        $("#aoiGraphBody").find("select").each(function() {
            $(this).addClass("select_min");
            $(this).width("120");
        });
        $("#aoiGraphBody").find("tr").each(function() {
            $(this).css("height", "45px");
        });
        $("#aoiGraphTable").css("width", "380px");

        /**4.赋予默认值*/
        var selected = aoiGraph.fillStyle.substr(aoiGraph.fillStyle.length - 4, 3);
        $("#cfg_aoi_diaphaneity").val(selected);

        //根据下拉框中的颜色分别进行判断,当前只有4个颜色
        for ( var i = 0; i < 4; i++) {
            var color = $(".draw-color .colorMore a>span").find("em").eq(i).css('background-color');
            if (color == aoiGraph.strokeStyle) {
                $(".draw-color>a>span").attr("class", $(".draw-color .colorMore a").find("span").eq(i).attr("class"));
                $("#cfg_aoi_color").val(color); // 赋值隐藏的真正颜色
                break;
            }
        }

    }

    /**
     * 执行修改AOI信息
     */
    function modify() {
        var aoiGraph = top.schemeAoiGraphs[top.modifyAoiIndex];
        aoiGraph.showName = $("#modify_aoi_showname").val();

        aoiGraph.strokeStyle = $("#cfg_aoi_color").val();
        aoiGraph.fillStyle = $("#cfg_aoi_color").val().colorRgba($("#cfg_aoi_diaphaneity").val());

        var inputPara = {
            "projectCode" : $("#projectCode").val(),
            "schemeCode" : $("#schemeCode").val(),
            "thePageAoiGraph" : JSON.stringify(aoiGraph)
        };
        callJsonDataBySync("analysis_modifyAoi.action", inputPara, modifySuccessFunction, loadErrorFunction);
    }

    /**
     * 修改被试信息成功时的回调
     */
    function modifySuccessFunction(retListJson) {
        top.ownDraw(); //修改后重新绘制
        popdown('modifyAoi');
    }

    /**
     * 修改被试信息错误时的回调
     */
    function loadErrorFunction(status) {
        if (status != "success") {
            popalert({
                "content" : "系统忙，请稍后重试！",
                "icon" : "warning",
                "okVal" : "确定",
                "cancel" : false
            });
        }
    }

    /**
     * 导出AOI数据
     */
    function exportData() {
        top.exportAoiGraphs();
        popdown('modifyAoi');
    }
</script>
</html>